<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{css/bootstrap.min.css}">

    <script th:src="@{js/jquery-1.10.2.min.js}"></script>

    <script th:src="@{js/bootstrap.min.js}"></script>

    <script th:src="@{js/echarts.min.js}"></script>
    <style>
        #mydiv {
            background-color: #A9A9A9;
            padding: 70px;
        }
    </style>
</head>
<body>
<div class="container">
<!--    header-->
<div class="row clearfix">
    <div class="col-md-12 column" th:include="common/header.html">
    </div>
</div>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column" id="mydiv">
            你还没有购买任何商品
            <button type="button" class="btn btn-default btn-primary">去购物</button>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table">
                <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" value="">
                    </th>
                    <th>
                        图片
                    </th>
                    <th>
                        描述
                    </th>
                    <th>
                        属性
                    </th>
                    <th>
                        价格
                    </th>
                    <th>
                        数量
                    </th>
                    <th>
                        小计
                    </th>
                    <th>
                        操作
                    </th>


                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        <img width="15%" height="15%" src="static/images/xh_img2.jpg"/>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">多种组合包邮年底...</a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">颜色：红色规格：束</a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">23.00</a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">
                                <button id="sub">-</button>
                                <input type="number" value="1" id="num">
                                <button id="add">+</button>
                                <script>
                                    let addNumber1 = document.getElementById('add');
                                    let subNumber1 = document.getElementById('sub');
                                    // 增加数量
                                    addNumber.addEventListener('click', function () {
                                        let num = Number(document.getElementById('num').value);
                                        num++;
                                        document.getElementById('num').value = num;
                                    })
                                    // 减少数量
                                    subNumber.addEventListener('click', function () {
                                        let num = Number(document.getElementById('num').value);
                                        num--;
                                        if (num < 0) {  // 最小值不能小于0
                                            num = 0;
                                        }
                                        document.getElementById('num').value = num;
                                    })
                                </script>
                            </a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">23.00</a>
                        </p>
                    </td>
                    <td><a href="#"> 删除</a></td>
                </tr>


                <tr>
                    <td>
                        <input type="checkbox" name="" value="">
                    </td>
                    <td>
                        <img img width="15%" height="15%" src="static/images/xh_img3.jpg"/>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">单支可售浪漫节日...</a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">颜色：紫色规格：束</a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">38.00
                        </p>
                    </td>
                    <td>
                        <button id="sub">-</button>
                        <input type="number" value="1" id="num">
                        <button id="add">+</button>
                        <script>
                            let addNumber = document.getElementById('add');
                            let subNumber = document.getElementById('sub');
                            // 增加数量
                            addNumber.addEventListener('click', function () {
                                let num = Number(document.getElementById('num').value);
                                num++;
                                document.getElementById('num').value = num;
                            })
                            // 减少数量
                            subNumber.addEventListener('click', function () {
                                let num = Number(document.getElementById('num').value);
                                num--;
                                if (num < 0) {  // 最小值不能小于0
                                    num = 0;
                                }
                                document.getElementById('num').value = num;
                            })
                        </script>

                    </td>
                    <td>
                        <p>
                            <a class="btn" href="#">152.00</a>
                        </p>
                    </td>
                    <td><a href="#"> 删除</a></td>
                </tr>


                </tbody>
            </table>
            <a>总计:￥0.00</a>
            <button type="button" class="btn btn-default btn-danger">去结算</button>
        </div>
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column" th:include="common/footer.html">
    </div>
</div>
</div>
</body>
</html>